<template>
  <el-card body-style="min-height: 80vh">
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate">新增</el-button>
      </div>
      <div @click="getMenuList()">
        <el-button circle>
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <el-divider />
    <!-- 树形表格 -->
    <el-table
      :data="tableData"
      row-key="id"
      :tree-props="{ children: 'menuList', hasChildren: 'hasChildren' }"
      style="width: 100%"
    >
      <el-table-column label="菜单" width="420">
        <template #default="{ row }">
          <el-tag :type="row.type !== 2 ? 'primary' : 'info'">{{
            row.type !== 2 ? "菜单" : "权限"
          }}</el-tag>
          <span class="ml-2">{{ row.menuName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图标" width="120" align="center">
        <template #default="{ row }">
          <el-icon v-if="row.type !== 2">
            <component :is="row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status ? 'primary' : 'danger'">{{
            row.status ? "正常" : "停用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
          <el-button v-if="row.type !== 2" type="primary" @click="handleAddChild(row.id)"
            >添加</el-button
          >
          <el-popconfirm
            width="180"
            title="是否要删除该菜单？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="handleDelete(row.id)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或修改表单 -->
    <form-drawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="上级菜单">
          <el-cascader
            v-model="form.parentId"
            :options="tableData"
            :props="{
              value: 'id',
              label: 'menuName',
              children: 'menuList',
              emitPath: false,
              checkStrictly: true
            }"
            placeholder="请选择上级菜单"
            style="width: 56%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.type">
            <el-radio :value="1" border>菜单</el-radio>
            <el-radio :value="2" border>规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input
            v-model="form.menuName"
            placeholder="请输入菜单名称"
            clearable
            style="width: 56%"
          />
        </el-form-item>
        <el-form-item v-if="form.type !== 2" label="菜单图标">
          <el-popover
            :visible="visible"
            trigger="click"
            :show-arrow="false"
            popper-style="width: 300px"
            :persistent="false"
            :hide-after="0"
          >
            <template #reference>
              <el-input
                v-model="form.icon"
                placeholder="请选择菜单图标"
                readonly
                style="width: 56%"
              >
                <template #prefix>
                  <el-icon :size="20" v-if="form.icon" color="var(--el-color-primary)" class="mr-2">
                    <component :is="form.icon"></component>
                  </el-icon>
                </template>
                <template #append>
                  <div class="px-4" @click="handleChangeVisible">
                    <el-icon color="var(--el-color-primary)"><Grid /></el-icon>
                  </div>
                </template>
              </el-input>
            </template>
            <div class="h-64 grid grid-cols-6 gap-2 overflow-auto">
              <div
                v-for="item in iconList"
                :key="item"
                class="w-8 h-8 flex justify-center items-center cursor-pointer"
              >
                <el-icon>
                  <component :is="item" @click="handleChooseIcon(item)" />
                </el-icon>
              </div>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item v-if="form.type !== 2" label="路由地址">
          <el-input
            v-model="form.routeAddress"
            placeholder="请输入路由地址"
            clearable
            style="width: 56%"
          />
        </el-form-item>
        <el-form-item v-if="form.type === 1" label="组件路径">
          <el-input
            v-model="form.componentUrl"
            placeholder="请输入组件路径"
            clearable
            style="width: 56%"
          />
        </el-form-item>
        <el-form-item v-if="form.type === 1" label="组件名称">
          <el-input
            v-model="form.componentName"
            placeholder="请输入组件名称"
            clearable
            style="width: 56%"
          />
        </el-form-item>
        <el-form-item v-if="form.type === 2" label="权限标识">
          <el-input
            v-model="form.permissionFlag"
            placeholder="请输入权限标识"
            clearable
            style="width: 56%"
          />
        </el-form-item>
        <el-form-item v-if="form.type !== 2" label="排序">
          <el-input-number v-model="form.sort" :min="0" :max="1000" />
        </el-form-item>
        <el-form-item v-if="form.type !== 2" label="显示状态">
          <el-switch
            v-model="form.showStatus"
            size="large"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="隐藏"
          />
        </el-form-item>
        <el-form-item v-if="form.type !== 2" label="菜单状态">
          <el-switch
            v-model="form.status"
            size="large"
            inline-prompt
            active-text="正常"
            inactive-text="停用"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item v-if="form.type === 2" label="权限描述">
          <el-input
            type="textarea"
            v-model="form.permissionDesc"
            placeholder="请输入权限描述"
            rows="4"
            style="width: 56%"
          />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import FormDrawer from "@/components/FormDrawer.vue";
import { getMenuListApi, addMenuApi, editMenuApi, deleteMenuApi } from "@/api/user";
import { showLoading, hideLoading } from "@/utils";
// icon列表
const iconList = ref(Object.keys(ElementPlusIconsVue));
// 菜单数据
const tableData = ref([]);

const { formDrawerRef, drawerTitle, form, rules, formRef, handleCreate, handleEdit, handleSubmit } =
  useInitForm({
    form: {
      category: 1,
      id: "",
      parentId: 0,
      type: 1,
      menuName: "",
      icon: "",
      routeAddress: "",
      componentUrl: "",
      componentName: "",
      sort: 100,
      showStatus: 1,
      status: 1
    },
    createData: addMenuApi,
    updateData: editMenuApi,
    success: () => {
      location.reload();
    }
  });
// 选择图标弹框显示与隐藏
const visible = ref(false);
const handleChangeVisible = () => {
  visible.value = !visible.value;
};

// 选择图标
const handleChooseIcon = (item: string) => {
  form.icon = item;
  handleChangeVisible();
};

// 获取菜单列表
const getMenuList = async () => {
  try {
    showLoading();
    const res = await getMenuListApi({ category: 1 });
    tableData.value = res as any;
  } finally {
    hideLoading();
  }
};

// 删除菜单
const handleDelete = async (id: number) => {
  await deleteMenuApi(id);
  getMenuList();
};

// 添加菜单或规则
const handleAddChild = (id: number) => {
  handleCreate();
  form.parentId = id;
};

onMounted(() => {
  getMenuList();
});
</script>
<style scoped lang="scss">
:deep(.el-input-group__append) {
  padding: 0;
}
</style>
